<template>
  <el-dropdown @command="commandHandle" @visible-change="visibleChange">
    <div class="fx-ct-ct">
      <slot></slot>
      <div
        v-if="isShowValue"
        class="ft-14 min-wd-22px of-np cs-df"
        :style="{ maxWidth: maxWidth + 'px', color: color }"
      >
        {{ checkLabel }}
      </div>
      <slot name="behind"></slot>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item in dataList"
        :command="item"
        :key="item.value"
        :disabled="item.value == value"
        >{{ item.label }}</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "TrDropdown",
  props: {
    value: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    maxWidth: {
      type: Number,
      default: 96,
    },
    isShowValue: {
      type: Boolean,
      default: true,
    },
    color: {
      type: String,
      default: "#fff",
    },
  },
  computed: {
    checkLabel() {
      let obj = this.dataList.find((item) => item.value === this.value);
      return obj ? obj.label : "";
    },
  },
  methods: {
    commandHandle(val) {
      this.$emit("input", val.value);
      this.$emit("dropBack", val);
    },
    visibleChange(val) {
      this.$emit("visibleChange", val);
    },
  },
};
</script>

<style></style>
